import React, { Component } from 'react'
import BlogUserInfo from './BlogUserInfo'
import BlogDetails from './BlogDetails'

export default class Blog extends Component {
  constructor() {
    super();
    this.state = {
      num:1,
      userInfo: {
        userName: 'Jack'
      },
      blogInfo: {
        title: '马保国视频全部下架！',
        time: '2020-12-15 14:41:00',
        content: '全部下架全部下架全部下架全部下架全部下架全部下架全部下架'
      },
      blogInfo1: {
        title: '美国大选，拜登胜出',
        time: '2020-12-15 14:41:00',
        content: '拜登胜出拜登胜出拜登胜出拜登胜出拜登胜出'
      },
      blogInfo2: {
        title: '过年了过年了',
        time: '2020-12-15 14:41:00',
        content: '6666'
      }
    }
    console.log('000初始化：',this.state);
  }
  chagngNum() {
    this.setState({
      num: 666
    })
  }
  componentWillMount() {
    // 发请求！
    // console.log('1111componentWillMount:组件即将被安装');
    // console.log(this.state);
  }
  componentDidMount() {
    // console.log('3333componentDidMount:组件已经被安装');
  }
  shouldComponentUpdate(nextProps,nextState) {
    // 返回true就更新组件，执行render函数,默认返回true
    // 返回false就不更新，不执行对应函数
    // console.log(this.state);
    // console.log(nextState);
    // 根据具体情况，写判断条件
    if(nextState.num - this.state.num || nextProps) {
      return true
    }else {
      return false
    }
  }
  componentWillUpdate(val) {
    // console.log(val);
    // console.log('componentWillUpdate:组件即将更新');
  }
  componentDidUpdate(val) {
    // console.log('componentWillUpdate:组件已经更新');
  }
  componentWillReceiveProps(nextProps) {
    // 组件即将接受新的属性，适用于父传子的数据变化的场景.这是外部因素导致的变化
    // console.log('componentWillReceiveProps:',nextProps);
  }
  render() {
    console.log(222);
    return (
      <div>
        <h1>生命周期演示</h1>
        <p>BlogFather传过来的值:{this.props.msg}</p>
        <p>num:{this.state.num}</p>
        <button onClick={()=>this.chagngNum()}>内部因素：修改state.num</button>
        <BlogUserInfo userInfo={this.state.userInfo}/>
        <BlogDetails blogInfo={this.state.blogInfo}/>
        <BlogDetails blogInfo={this.state.blogInfo1}/>
        <BlogDetails blogInfo={this.state.blogInfo2}/>
      </div>
    )
  }
  componentWillUnmount() {
    // 组件即将被销毁
    // console.log('componentWillUnmount:组件即将被销毁');
  }
}
